import {
    getVisitorDetailApi,
    ipBlackApi,
    updateDetailApi
} from '@/api/custcare/visitor/visitor'
import {
    SaveVisitorDetail,
    Visitor,
    VisitorDetail,
    VisitorIpBlack,
    VisitorParam
} from '@/api/custcare/visitor/VisitorModel'
import useInstance from '@/hooks/useInstance'
import { StatusCode } from '@/http/request'
import { ElForm } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'

export default function useDetail(visitorInfo: any) {
    const { global } = useInstance()
    // 表单ref属性
    const visitorDetailForm = ref<InstanceType<typeof ElForm>>()
    const mainLayoutHeight = ref(0)
    const visitor = reactive({
        data: Object,
        detail: Object
    })
    const detailModel = reactive<VisitorDetail>({
        visitor_id: 0,
        name: '',
        mobile: '',
        email: '',
        qq: '',
        wechat: '',
        remark: ''
    })

    const showDetail = async () => {
        const visitor_id = visitorInfo.id
        let res = await getVisitorDetailApi(
            reactive<VisitorParam>({
                id: visitor_id
            })
        )
        if (res && res.code == StatusCode.Success) {
            visitor.data = res.data
            visitor.detail = res.data.detail
            detailModel.visitor_id = res.data.detail.visitor_id
            detailModel.name = res.data.detail.name
            detailModel.mobile = res.data.detail.mobile
            detailModel.email = res.data.detail.email
            detailModel.qq = res.data.detail.qq
            detailModel.wechat = res.data.detail.wechat
            detailModel.remark = res.data.detail.remark
            console.log('visitor=', visitor)
        }
    }

    const save = async () => {
        console.log('保存=', detailModel)
        const param = reactive<SaveVisitorDetail>({
            id: detailModel.visitor_id,
            name: detailModel.name,
            mobile: detailModel.mobile,
            email: detailModel.email,
            qq: detailModel.qq,
            wechat: detailModel.wechat,
            remark: detailModel.remark
        })
        let res = await updateDetailApi(param)
        if (res && res.code == StatusCode.Success) {
            // 信息提示
            global.$message({ message: res.msg, type: 'success' })
        }
    }

    const ipBlack = async (is_ip_black: boolean) => {
        let txt = '加入'
        if (is_ip_black == false) {
            txt = '解除'
        }
        const confirm = await global.$eleConfirm('确定' + txt + 'IP黑名单吗？')
        if (confirm) {
            const param = reactive<VisitorIpBlack>({
                is_ip_black: is_ip_black ? 1 : 0,
                ip: visitorInfo.client_ip
            })
            let res = await ipBlackApi(param)
            if (res && res.code == StatusCode.Success) {
                showDetail()
                // 信息提示
                global.$message({ message: res.msg, type: 'success' })
            }
        }
    }

    onMounted(() => {
        showDetail()
        nextTick(() => {
            mainLayoutHeight.value = window.innerHeight - 230
        })
    })

    return {
        visitorDetailForm,
        mainLayoutHeight,
        visitor,
        showDetail,
        detailModel,
        save,
        ipBlack
    }
}
